Visual Studio CodeによるNode.jsのデバッグ（その２）

#Node.js

#VSCode（Visual Studio Code）

SIN

2016.03.25

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

1 はじめに

前回も紹介しましたが、Visual Studio Code（以下VS Code）でJavaScriptを書く場合に、型情報をうまく認識させると、格段に使い勝手が向上します。

公開当初、VS Codeでは、tsdを使用して型情報を取り込み、下記のようなリファレンスをコードに挿入する方法が取られてました。

/// <reference path="node/node.d.ts" />

このため、今でも、この方法を解説するドキュメントが多数公開されています。

しかし、Version 0.5.0 以降では、jsconfig.jsonを置くことで、上記のような挿入は必要なくなっています。また、型情報の取得も、公式ドキュメントでは、tsdからtypingsにさらと変更されています。
Node.js Applications with VS Code

公式ページのビデオで紹介されている、「型を認識できない変数（__dirname）に、波線が表示されていて、そこからアクションメニューで一発リファレンス挿入！」っていう、あの気持ちよい操作は、もう出来ないのです。
Code Editing. Redefined.

2 Exspressによる雛形アプリ

今回は、ジェネレータで作成したExpressの雛形プログラムを題材に、順番にオブジェクトを認識させて行きながら、VS Codeが、どういう風にJavaScriptの型情報を認識しているか確かめてみたいと思います。

(1) Expressのインストール

最初に、Expressをグローバルにインストールします。（既にインストール済みの場合は必要ありません）

$ npm install -g express
$ npm install -g express-generator

(2) アプリの作成

続いてサンプルのアプリを作成します。（ここでは、名前をSampleAppとしました）作成後、プロッジェクトのトップに入って、依存モジュールもダウンロードします。

$ express SampleApp
$ cd SampleApp
$ npm install

(3) 動作確認

下記のコマンドで、アプリを起動します。

$ npm start

> [email protected] start /Users/sin/tmp/SampleApp
> node ./bin/www

プラウザでhttp://localhost:3000/にアクセスできたら完了です。

015

Ctrl+Cでプログラムは終了します。

3 型情報の適用

(1) Expressモジュール

コマンドラインから、下記の要領でVS Codeでプロジェクトを開いてください。

Expressのプロジェクトファイルであるpackage.jsonから自動的にプログラムのエントリーポイントを読みとりますので、一度、でデバッグ実行するだけで、launch.jsonに、${workspaceRoot}/bin/wwwがセットされます。

$ code .

それでは、最初に、app.jsを開いて、変数expressにマウスカーソルを合わせて見てください。この時、var express: anyと表示されています。

001

コードの保管もできていません。

002

この時点では、Expressの型情報が無いので、VS Codeはオブジェクトを認識できないわけです。

それでは、プロジェクトのトップにjsconfig.jsonというファイルを作成します。

{
    "compilerOptions": {
        "target": "es6",
        "module": "commonjs"
    }
}

003

なお、jsconfig.jsonを修正時には、プロジェクトの再読み込みが必要です。 VS Codeを再起動するか、もしくは、コマンドから「Reload JavaScript Project」を実行して下さい。

004

続いて、typingsを使用して、型情報をプロジェクトに取り込みます。（既にtypingsがインストールされている前提です）

作業が不明な場合は、下記をご参照ください。
Visual Studio CodeによるNode.jsのデバッグ（その１）

$ typings install express --ambient

ファイルはtypingsの下に取り込まれます。

006

これで、型が認識できるようになりました。

005

補完もできています。

007

(2) 情報不足

続いて、app.jsのroutes変数にポインタを当ててみてください。こちらは、requireで他のファイルからモジュールを読み込んでいるのですが、まだ情報が不十分のようです。

008

それでは、routes/index.jsの方を確認してみます。 router変数にポインタを当てても、型が認識されていません。どうやら、Router()が分からないようです。

009

結論から言ってしまうと、実は、expressだけでは、不十分だったのです。次のように、型情報を追加してください。

$ typings install serve-static express-serve-static-core --ambient

今度は、Router型が認識できています。

010

app.jsの方に戻っても、認識できていることを確認できます。

011

(3) 拡張子

今度は、bin/wwwを開いてみてください。

なんと、JavaScript組み込みのはずのrequireに波線が入っています。

012

実は、これ、ファイルの拡張子が無いため、VS Codeが、このファイルをJavaScriptだと分かっていなためです。

試しに、.jsの拡張子を追加すると、波線は消えます。

013

拡張子と言語の紐付けは、下記のファイルで行われています。

/Applications/Visual Studio Code.app/Contents/Resources/app/extensions/javascript/package.json

ファイルの中を確認した感じ、紐付ける拡張子は追加できそうですが、拡張子なしは、指定できないように見えます。

//・・・省略

"contributes": {
		"languages": [
			{
            //・・・省略
			},
			{
				"id": "javascript",
				"aliases": [
					"JavaScript",
					"javascript",
					"js"
				],
				"extensions": [
					".js",
					".es6"
				],
				"filenames": [
					"jakefile"
				],
				"firstLine": "^#!.*\\bnode",
				"mimetypes": [
					"text/javascript"
				]
			}
		],
//・・・省略

最後に、require('http')なども認識できるように、Node.js自体の型情報も読み込んでおくことにします。